<script setup lang="ts">

</script>

<template>
  <aside>
    <router-link to="/home" name="主页">主页</router-link>
    <router-link to="/statistics" name="统计">统计</router-link>
    <router-link to="/create" name="新增">新增</router-link>
    <router-link to="/export" name="导出">导出</router-link>
    <router-link to="/login" name="登录">登录</router-link>
  </aside>
</template>

<style scoped lang="scss">
aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
  background-color: rgba(32, 36, 37, 0.66);
  border-radius: 10px 0 0 10px;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;

  a {
    color: lightgreen;
    color: #fff;
    padding: 10px;
    text-decoration: none;
  }
}

@media screen and (max-width: 750px) {
  aside {
    display: none;
  }
}
</style>
